// columnDefs.js

export const columnDefs = [
  {
    headerName: 'Name',
    field: 'name',
    headerComponentParams: {
      template:
        '<div class="ag-cell-label-container" role="presentation">' +
        '  <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>' +
        '  <div ref="eLabel" class="ag-header-cell-label" role="presentation">' +
        '    <i class="el-icon-user" title="用户名"></i>' + // 添加 Font Awesome 图标和中文提示
        '    <span ref="eText" class="ag-header-cell-text" role="columnheader"></span>' +
        '    <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon"></span>' +
        '  </div>' +
        '</div>'
    }
  },
  {
    headerName: 'Age',
    field: 'age',
    // headerComponentParams: {
    //   template:
    //     '<div class="ag-cell-label-container" role="presentation">' +
    //     '  <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>' +
    //     '  <div ref="eLabel" class="ag-header-cell-label" role="presentation">' +
    //     '    <span ref="eText" class="ag-header-cell-text" role="columnheader"></span>' +
    //     '    <i class="el-icon-date" title="年龄111"></i>' + // 添加 Font Awesome 图标和中文提示
    //     '    <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon"></span>' +
    //     '  </div>' +
    //     '</div>'
    // }
    headerCellRenderer: function(params) {
      return `
        <div style="display: flex; align-items: center;">
          <img src="path/to/age-icon.png" alt="年龄" title="年龄" style="vertical-align: middle; margin-right: 5px;" />
          <span>${params.colDef.headerName}</span>
        </div>
      `;
    }
  }
];